<!-- 系统设置 -->
<template>
    <div class="sys_tabs">

        <div class="sys_title">
            <div class="title">{{ titleConvert(tabs_value, 'title') }}</div>
            <div class="txt">{{ titleConvert(tabs_value, 'sub') }}</div>
        </div>
        <div class="sys_tabbox">
            <div :class="['tabsbtn', tabs_value === 'home' ? 'selected' : '']" @click="tabs_click('home')">控制台</div>
            <div :class="['tabsbtn', tabs_value === 'customize' ? 'selected' : '']" @click="tabs_click('customize')">自定义</div>

        </div>

        <div class="sys_content" v-loading="content_loading">

        </div>
    </div>
</template>

<script>
import { system_settings_list } from "@/utils/api";
export default {
    name: "home",
    data() {
        return {
            content_loading: false,
            cz_loading: false,
            xg_loading: false,
            tabs_value: 'home',
            blockedIpsStr: '',

        }
    },
    mounted() {
   
    },
    computed: {

    },
    methods: {
        resetForm(type) {
            this.get_data(type)
        },
        updateBlockedIps() {
            this.systemList.blocked_ips = this.blockedIpsStr
                .split(',')
                .map(ip => ip.trim())
                .filter(ip => ip);
        },
        addItem() {
            this.leverList.leverage_multiples.push(1)
        },
        isObject(val) {
            return val && typeof val === 'object' && !Array.isArray(val);
        },
        isBoolean(val) {
            return val === true || val === false || val === 'true' || val === 'false';
        },
        isTimeField(key, val) {
            return typeof val === 'string' && /^\d{2}:\d{2}(:\d{2})?$/.test(val);
        },
        removeItem(index) {
            this.leverList.leverage_multiples.splice(index, 1)
        },
        // isTimeField(key, val) {
        //     return typeof val === 'string' && key.toLowerCase().includes('time');
        // },
        isNumericField(val) {
            // 字符串里只要是数字（带小数也算），就返回 true
            if (typeof val === 'number') return true;
            if (typeof val === 'string') {
                // 去掉空格后是否是数字
                return val.trim() !== '' && !isNaN(Number(val));
            }
            return false;
        },
        // 文字转换
        titleConvert(title, sub) {
            const map = {
                home: {
                    title: '控制台',
                    sub: '用于展示当前系统中的统计数据、统计报表及重要实时数据'
                },
                customize: {
                    title: '自定义',
                    sub: '用户自定义展示模块'
                },
            };
            return map[title]?.[sub] || title;
        },
        // 设置标签页
        tabs_click(type) {
            this.tabs_value = type
            this.get_data(type)
        },
        // 查询
        async get_data(type) {

            if (!type) return

            this.content_loading = true
            let params = `/${type}`

            try {
                const res = await system_settings_list(params);
                if (res.data && res.data.code == "200") {
                    console.log(res, '系统设置' + type);
                    if (type === 'stock') this.stockList = res.data.data.value
                    if (type === 'lever') {
                        this.leverList = res.data.data.value
                        console.log(this.leverList, ' this.leverList ');
                    }
                    if (type === 'email') this.emailList = res.data.data.value
                    if (type === 'system') {
                        this.systemList = res.data.data.value

                        this.blockedIpsStr = res.data.data.value.blocked_ips.join(', ');
                    }
                } else {
                    this.$message.error(res?.data?.msg || "获取数据失败");
                }
            } catch (err) {
                console.error("获取数据失败:", err);
                this.$message.error("请求出错，请稍后再试");
            } finally {
                this.content_loading = false
            }
        },
    },

}
</script>

<style lang="less">
.sys_tabs {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .fbtnsys {
        padding-left: 250px;
        padding-top: 15px;
    }

    .sys_title {
        background-color: #e8edf0;
        padding: 15px;

        .title {
            font-weight: 700;
            font-size: 16px;
        }

        .txt {
            font-size: 14px;
        }
    }

    .sys_tabbox {
        display: flex;
        padding-left: 15px;
        background-color: #e8edf0;

        .tabsbtn {
            height: 35px;
            padding: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            cursor: pointer;
            margin: 0 5px;
            background-color: #d8e0e6;
            color: #95a5a6;
        }

        .selected {
            background-color: #ffffff;
            color: #333;
        }
    }

    .sys_content {
        padding: 15px 23px;
        background-color: #fff;
        max-height: calc(100vh - 210px);
        overflow: auto;

    }
}
</style>